<template>
    <aside id="sidebar" class="sidebar c-overflow mCustomScrollbar _mCS_1 mCS-autoHide" style="overflow: visible;"><div id="mCSB_1" class="mCustomScrollBox mCS-minimal-dark mCSB_vertical_horizontal mCSB_outside" tabindex="0"><div id="mCSB_1_container" class="mCSB_container mCS_x_hidden mCS_no_scrollbar_x" style="position: relative; top: 0px; left: 0px; width: 100%;" dir="ltr">
    <div class="profile-menu">
        <a href="">
        <div class="profile-pic">
            <img src="/img/profile-pics/1.jpg" alt="" class="mCS_img_loaded">
        </div>
        <div class="profile-info">
            {{user.name}}
            <i class="zmdi zmdi-caret-down"></i>
        </div>
        </a>
        <ul class="main-menu">
            <li>
                <a href="profile-about.html"><i class="zmdi zmdi-account"></i> View Profile</a>
            </li>
            <li>
                <a href=""><i class="zmdi zmdi-input-antenna"></i> Privacy Settings</a>
            </li>
            <li>
                <a href=""><i class="zmdi zmdi-settings"></i> Settings</a>
            </li>
            <li>
                <a href=""><i class="zmdi zmdi-time-restore"></i> Logout</a>
            </li>
        </ul>
    </div>
    <ul class="main-menu">
        <li v-for="menu in menus">
            <a href="{{menu.action}}"><i class="{{ menu.icon }}"></i>{{menu.label}}</a>
        </li>
        <li class="active">
            <a href="index.html"><i class="zmdi zmdi-home"></i> Home</a>
        </li>
        <li class="sub-menu toggled">
            <a href=""><i class="zmdi zmdi-view-compact"></i> Headers</a>
            <ul style="display: block;">
                <li><a href="textual-menu.html">Textual menu</a></li>
                <li><a href="image-logo.html">Image logo</a></li>
                <li><a href="top-mainmenu.html">Mainmenu on top</a></li>
            </ul>
        </li>
        <li><a href="typography.html"><i class="zmdi zmdi-format-underlined"></i> Typography</a></li>
        <li class="sub-menu">
            <a href=""><i class="zmdi zmdi-widgets"></i> Widgets</a>
            <ul>
                <li><a href="widget-templates.html">Templates</a></li>
                <li><a href="widgets.html">Widgets</a></li>
            </ul>
        </li>
        <li class="sub-menu">
            <a href=""><i class="zmdi zmdi-view-list"></i> Tables</a>
            <ul>
                <li><a href="tables.html">Normal Tables</a></li>
                <li><a href="data-tables.html">Data Tables</a></li>
            </ul>
        </li>
        <li class="sub-menu">
            <a href=""><i class="zmdi zmdi-collection-text"></i> Forms</a>
            <ul>
                <li><a href="form-elements.html">Basic Form Elements</a></li>
                <li><a href="form-components.html">Form Components</a></li>
                <li><a href="form-examples.html">Form Examples</a></li>
                <li><a href="form-validations.html">Form Validation</a></li>
            </ul>
        </li>
        <li class="sub-menu">
            <a href=""><i class="zmdi zmdi-swap-alt"></i>User Interface</a>
            <ul>
                <li><a href="colors.html">Colors</a></li>
                <li><a href="animations.html">Animations</a></li>
                <li><a href="box-shadow.html">Box Shadow</a></li>
                <li><a href="buttons.html">Buttons</a></li>
                <li><a href="icons.html">Icons</a></li>
                <li><a href="alerts.html">Alerts</a></li>
                <li><a href="preloaders.html">Preloaders</a></li>
                <li><a href="notification-dialog.html">Notifications &amp; Dialogs</a></li>
                <li><a href="media.html">Media</a></li>
                <li><a href="components.html">Components</a></li>
                <li><a href="other-components.html">Others</a></li>
            </ul>
        </li>
        <li class="sub-menu">
            <a href=""><i class="zmdi zmdi-trending-up"></i>Charts</a>
            <ul>
                <li><a href="flot-charts.html">Flot Charts</a></li>
                <li><a href="other-charts.html">Other Charts</a></li>
            </ul>
        </li>
        <li><a href="calendar.html"><i class="zmdi zmdi-calendar"></i> Calendar</a></li>
        <li class="sub-menu">
            <a href=""><i class="zmdi zmdi-image"></i>Photo Gallery</a>
            <ul>
                <li><a href="photos.html">Default</a></li>
                <li><a href="photo-timeline.html">Timeline</a></li>
            </ul>
        </li>
        <li><a href="generic-classes.html"><i class="zmdi zmdi-layers"></i> Generic Classes</a></li>
        <li class="sub-menu">
            <a href=""><i class="zmdi zmdi-collection-item"></i> Sample Pages</a>
            <ul>
                <li><a href="profile-about.html">Profile</a></li>
                <li><a href="list-view.html">List View</a></li>
                <li><a href="messages.html">Messages</a></li>
                <li><a href="pricing-table.html">Pricing Table</a></li>
                <li><a href="contacts.html">Contacts</a></li>
                <li><a href="wall.html">Wall</a></li>
                <li><a href="invoice.html">Invoice</a></li>
                <li><a href="login.html">Login and Sign Up</a></li>
                <li><a href="lockscreen.html">Lockscreen</a></li>
                <li><a href="404.html">Error 404</a></li>
            </ul>
        </li>
        <li class="sub-menu">
            <a href="form-examples.html"><i class="zmdi zmdi-menu"></i> 3 Level Menu</a>
            <ul>
                <li><a href="form-elements.html">Level 2 link</a></li>
                <li><a href="form-components.html">Another level 2 Link</a></li>
                <li class="sub-menu">
                    <a href="form-examples.html">I have children too</a>
                    <ul>
                        <li><a href="">Level 3 link</a></li>
                        <li><a href="">Another Level 3 link</a></li>
                        <li><a href="">Third one</a></li>
                    </ul>
                </li>
                <li><a href="form-validations.html">One more 2</a></li>
            </ul>
        </li>
        <li>
            <a href="https://wrapbootstrap.com/theme/material-admin-responsive-angularjs-WB011H985"><i class="zmdi zmdi-money"></i> Buy this template</a>
        </li>
    </ul>
    </div></div><div id="mCSB_1_scrollbar_vertical" class="mCSB_scrollTools mCSB_1_scrollbar mCS-minimal-dark mCSB_scrollTools_vertical" style="display: block;"><div class="mCSB_draggerContainer"><div id="mCSB_1_dragger_vertical" class="mCSB_dragger" style="position: absolute; min-height: 50px; height: 142px; top: 0px; display: block; max-height: 349px;" oncontextmenu="return false;"><div class="mCSB_dragger_bar" style="line-height: 50px;"></div></div><div class="mCSB_draggerRail"></div></div></div><div id="mCSB_1_scrollbar_horizontal" class="mCSB_scrollTools mCSB_1_scrollbar mCS-minimal-dark mCSB_scrollTools_horizontal" style="display: none;"><div class="mCSB_draggerContainer"><div id="mCSB_1_dragger_horizontal" class="mCSB_dragger" style="position: absolute; min-width: 50px; width: 0px; left: 0px;" oncontextmenu="return false;"><div class="mCSB_dragger_bar"></div></div><div class="mCSB_draggerRail"></div></div></div></aside>
</template>

<script>
    export default {
        data(){
            return {
              user: _.clone(userBean.user),
              menus: _.clone(userBean.userMenu)
            }
        },
        ready () {
        }
    }
</script>